<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="/views/include/nocachehead.jsp"%>
<link type="text/css"
	href="${pageContext.request.contextPath}/css/smoothness/jquery-ui-1.8.16.custom.css"
	rel="stylesheet" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/calendar.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.form.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/regist.js"></script>
	<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/personInfo.js"></script>
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/css/regist.css" />
<script type="text/javascript">
	$(function() {
		// Tabs
		getCountries('${personalInfo.country}', '${personalInfo.province}',
				'${personalInfo.city}');
		$('#tabs').tabs({select: function(event, ui) { 
			if(ui.index!=0)
				{
				$('.imgareaselect-outer').hide();
				//alert(ui.index); 
				}
			else{
				$('.imgareaselect-outer').show();
			}
			}});
		
		$('img#photo').ready(function() {

			//	init();
		});
	});
</script>

<style type="text/css">
.imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4
	{
	opacity: 0.5;
	filter: alpha(opacity =           50);
}

.imgareaselect-handle {
	background-color: #fff;
	border: solid 1px #000;
	opacity: 0.5;
	filter: alpha(opacity =           50);
}

.imgareaselect-outer {
	background-color: #000;
	opacity: 0.5;
	filter: alpha(opacity =           50);
}

.imgareaselect-selection {
	
}
</style>
<script>

    $(document).ready(function(){  
        var validateForm = function() {  
              var fileName = $('#img').val();  
              var m=parseInt(fileName.toString().lastIndexOf("."))+1;  
              var extVal=fileName.toString().substr(m);  
              if(extVal!="jpg") {  
                  alert('文件类型必须为Word文件！');  
                  return false;  
              }  
              $('#upMessage').html('文件上传中，请等待... ...');  
              return true;      
      };  

        var showResponse = function(data,status) {
        	alert(status);
        	alert(data);
            $('#upMessage').fadeIn("fast",function(){  
                 
            });  
          return true;  
         };  
        var options={       
              target : '#upMessage',    
              url : '/skyline/user/upload.html',  
              beforeSubmit: validateForm,  
              success : showResponse,  
              resetForm:true  
          };  
        $('#upForm').ajaxForm(options);           
    }); 
    
</script>
</head>
<body onload="">
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">编辑头像</a></li>
			<li><a href="#tabs-2">编辑个人信息</a></li>
			<li><a href="#tabs-3">密码修改</a></li>
		</ul>
		<div id="tabs-1">
			<div id="container">
				<form id="upForm""
					method="POST" enctype="multipart/form-data">
					<div class="frame" style="margin: 0 0.3em;">
						<img id="photo" src="/skyline/image/cover_s.jpg" onload="init()">
					</div>
					<input name="file" style="width: 220px" id="img" type="file"
						value="选择图片"><br /> <input type="submit" value="上传" />
						<div id="upMessage" style="displan:hidden"></div>  
				</form>
				<div id="preview"
					style="width: 100px; height: 100px; overflow: hidden;">
					<img src="/skyline/image/cover_s.jpg"
						style="width: 283px; height: 283px; margin-left: -91px; margin-top: -65px;">
				</div>
				<input type="button" id="saveNewPhoto" value="保存设置"><br /> <input
					type="button" value="撤销" />
			</div>
		</div>

		<div id="tabs-2" style="z-index: 10000" >
			<form id="updatePersonalInfo"
				action="<%=request.getContextPath()%>/user/updateinfo.html"
				method="post">
				<table >
					<tr>
						<td colspan="2">基本信息:
							<hr>
						</td>
					</tr>
					<tr>
						<td align="right">真实姓名:</td>
						<td><input type="text" class="updatePersonalInfo" id="name"
							name="name" value="${personalInfo.name}"
							onBlur="CheckItem('name','姓名',20)" /></td>
					</tr>
					<tr>
						<td align="right">昵称:</td>
						<td><input type="text" class="updatePersonalInfo"
							id="nickname" name="nickname" value="${personalInfo.nickname}"
							onBlur="CheckItem('nickname','昵称',20)" /></td>

					</tr>
					<tr>
						<td align="right">来自:</td>
						<td><select id="country" name="country"
							onchange="getProvinces('${personalInfo.province }','${personalInfo.city}')">

						</select> &nbsp; <select id="province" name="province"
							onchange="getCities('${personalInfo.city}')">

						</select> &nbsp; <select id="city" name="city">

						</select></td>
					</tr>
					<tr>
						<td>
							<div align="right">性别:</div>
						</td>
						<td><c:choose>
								<c:when test="${personalInfo.sex == 'MALE' }">
									<label> <input name="sex" type="radio" id="sex"
										value="MALE" checked="checked" /> 男 </label>
									<label> <input name="sex" type="radio" id="sex"
										value="FEMALE" /> 女 </label>
								</c:when>
								<c:otherwise>
									<label> <input name="sex" type="radio" id="sex"
										value="MALE" />男 </label>
									<label> <input name="sex" type="radio" id="sex"
										value="FEMALE" checked="checked" /> 女 </label>
								</c:otherwise>
							</c:choose></td>
					</tr>
					<tr>
						<td>
							<div align="right">生日:</div>
						</td>
						<td><label> <input type="text" name="birthday"
								id="birthday" value="${personalInfo.birthday}"
								onclick="SelectDate(this)" readonly="readonly" /> </label></td>
					</tr>

					<tr>
						<td align="right">毕业学校 :</td>
						<td><input type="text" id="graduateshool"
							name="graduateshool" value="${personalInfo.graduateSchool}" /></td>
					</tr>
					<tr>
						<td align="right">职业:</td>
						<td><input type="text" id="job" name="job"
							value="${personalInfo.job}" /></td>
					</tr>
					<tr>
						<td colspan="3">通信信息:
							<hr>
						</td>
					</tr>
					<tr>
						<td align="right">MobilePhone:</td>
						<td><input type="text" id="mobilephone" name="mobilephone"
							value="${personalInfo.mobilephone}" /></td>
					</tr>
					<tr>
						<td align="right">QQ:</td>
						<td><input type="text" id="qq" name="qq"
							value="${personalInfo.qq}" /></td>
					</tr>
					<tr>
						<td align="right">MSN:</td>
						<td><input type="text" id="msn" name="msn"
							value="${personalInfo.msn}" /></td>
					</tr>

					<tr height="36">
						<td colspan="2" align="right"><input type="submit"
							name="submit" value="submit"> <input type="reset"
							value="reset"></td>
					</tr>
				</table>
			</form>
		</div>
		<div id="tabs-3" style="z-index: 10000">
			<form id="updatePassword"
				action="<%=request.getContextPath()%>/user/modifypassword.html"
				method="post">
				<table style="z-index: 10">
					<tr height="36">
						<td align="right">原始密码:</td>
						<td><input type="password" class="registInput"
							id="oldPassword" name="oldPassword" value=""
							onBlur="CheckOldPassword(oldPassword,this.value)" /></td>
						<td>
							<div id="oldpassword_div" style="display: none">
								<img id="oldpassword_img" /> <font id="oldpassword_font"></font>
							</div>
						</td>
					</tr>
					<tr>
					<tr height="36">
						<td align="right">新密码:</td>
						<td><input type="password" class="registInput" id="password"
							name="password" size="24" onFocus="Focus('password','密码',32,6)"
							onBlur="CheckPassword('password','密码',32,6)"></td>
						<td>
							<div id="password_div" style="display: none">
								<img id="password_img" /> <font id="password_font"></font>
							</div>
						</td>
					</tr>
					<tr height="36">
						<td align="right">密码确认:</td>
						<td><input type="password" class="registInput"
							id="passwordConfirm" name="passwordConfirm" size="24"
							onFocus="Focus('passwordConfirm','密码',32,6)"
							onblur="CheckPasswordConfirm('password','密码','passwordConfirm')">
						</td>
						<td>
							<div id="passwordConfirm_div" style="display: none">
								<img id="passwordConfirm_img" /> <font
									id="passwordConfirm_font"></font>
							</div>
						</td>
					</tr>

					<tr height="36">
						<td colspan="2" align="right"><input type="button"
							name="submit" value="submit" onclick=UpdatePassword()> <input type="reset"
							value="reset"></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	<!-- tabs -->
</body>
</html>